<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

    <style>
        .word-card{
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
        }
        .word-card span{
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
            margin-left: 10px;
            margin-bottom: 10px;
        }
        .word-card em{
            font-style: normal;
            font-size: 12px;
            display: inline-block;
            background: #73c9e5;
            border-radius: 2px;
            color: #fff;
            margin-left: 1px;
            transform: scale(.85);
            width: 32px;
            text-align: center;
            height: 17px;
            
        }
    </style>
</head>

<body>
        <div id="demo_x" class="box" ></div>
        <div style="margin: 10px;color: #5a5a5a;font-size: 15px;">
            网站导航菜单列表
        </div>
</body>

<!-- 必要 -->
<script src="https://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="./render_somthing.js"></script>
<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.0.0-alpha1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.0.0-alpha1/js/bootstrap.min.js"></script>
<script>
    {
        var render_somthing_demo_x;
        render_somthing_demo_x = new render_somthing();
        render_somthing_demo_x.init({
            // div的id
            id: "#demo_x",
            // x/y/flow   分别为x向滚动、y向滚动、瀑布流
            method: "x",
            // 容器是指即将渲染内容的外围容器，可以为div/table/ul ...
            container: {
                html: `
                <div class="word-card"></div>
    `
            },
            // 渲染内容的配置
            content: {
                default: `
                <span>#{word}<em>#{num}</em></span>
`,
            },
            // 条件渲染内容
            /*
                ^{ROW_INDEX} - 常量，表示数据数组的下标
                #{title}     - 变量，表示数据数组中对象的key
            */
            condition: [
            ],
        })
        render_somthing_demo_x.render([{
                        word:"动画",
                        num:"999+",
                    }, {
                        word:"科技",
                        num:"128",
                    }, {
                        word:"生活",
                        num:"5",
                    }, {
                        word:"科普",
                        num:"250",
                    }, {
                        word:"演讲",
                        num:"999+",
                    }, {
                        word:"资讯",
                        num:"125",
                    }, {
                        word:"游戏",
                        num:"25",
                    }, {
                        word:"影视",
                        num:"56",
                    }, {
                        word:"放映厅",
                        num:"26",
                    }, {
                        word:"数码",
                        num:"999+",
                    }, {
                        word:"番剧",
                        num:"999+",
                    }, ]);
    }
</script>

</html>